<template>
  <div id="pageTag">
    <v-card flat class="elevation-1 mb-3 pa-2">
      <v-card-title primary-title>
        <p class="title">
          与"
          <span class="red--text">{{ tag.name}}</span>"标签相关的文章
        </p>
      </v-card-title>
    </v-card>
    <v-card
      flat
      hover
      v-for="article in articles"
      :key="article.id"
      class="elevation-1 mb-3 pa-2"
      tile
    >
      <v-card-title primary-title>
        <div>
          <div class="headline">{{ article.title }}</div>
          <p class="text-xs-left grey--text">
            {{ article.updated_at }}&nbsp;/&nbsp;
            <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
            <v-icon small>far fa-comments</v-icon>&nbsp;123&nbsp;
          </p>
        </div>
      </v-card-title>
      <v-card-text>{{ article.description }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="red">分享</v-btn>
        <v-btn flat color="indigo">概览</v-btn>
        <v-spacer></v-spacer>
        <v-btn flat :to="{name:'article',params:{id:article.id}}">
          <v-icon small>fas fa-eye</v-icon>&nbsp;查看全文
        </v-btn>
      </v-card-actions>
    </v-card>
    <div v-if="pagination.count > 0" class="text-xs-center">
      <v-pagination v-model="pagination.current_page" :length="pagination.total_pages"></v-pagination>
    </div>
  </div>
</template>
<script>
import { getTagDetail } from '@/api/resource/tags'
export default {
  name: 'app-tag',
  data: () => ({
    tag: [],
    articles: [],
    pagination: {
      count: 0,
      current_page: 1,
      links: [],
      per_page: 15,
      total: 0,
      total_pages: 1
    }
  }),
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: 'init'
  },
  methods: {
    init () {
      let _this = this
      getTagDetail(_this.$route.params.id, { 'params': { 'include': 'articles' } }).then(res => {
        _this.tag = res.data
        _this.articles = res.data.articles.data
      }).catch(err => {
        console.log(err)
      })
    }
  },
  created () {
    this.init()
  }
}
</script>
